<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<%--
   IFRAME 元素也就是文档中的文档，或者像浮动的框架(FRAME)。frames 集合提供了对 IFRAME 内容的访问。
   frame有骨架的意思 而在其前面加个i构成了iframe元素也就是文档中的文档。
   使用iframe可以在网页中再嵌入一个网页

   --%>
<iframe width="1500" scrolling="auto" height="100" frameborder="0" allowtransparency="true"
               src="//i.tianqi.com/indemx.php?c=code&id=19&color=%230070C0&bgc=%23&bdc=%230070C0&icon=1&temp=1&num=5&site=12"></iframe>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

    <script src="http://api.map.baidu.com/api?v=2.0&ak=i3LQs7BoE5cXz7hw7MRdcmqiniUl0n2n" type="text/javascript"></script>
</head>
<form action="baidu/maps.do" method="post">
    <input type="text" name="city"  />
    <input type="submit" value="搜索">
</form>
<body>
<div align="center">
    <!--<h3>以天安门为中心显示</h3>-->
    <div id="tamMap" style="width:99%;height: 750px;"></div><!--onmousewheel="mScroll()"-->
    <button onclick="zoomOut()">放大</button>
    <button onclick="zoomIn()">缩小</button>
</div>
<script type="text/javascript">
    var currentSize = 15;
    var maxSize = 30;
    var minSize = 0;
    var step = 1;
    var tamMap = new BMap.Map("tamMap");    //创建地图实例
    var point = new BMap.Point(${lng}, ${lat}); // 创建点坐标  //经度  //纬度
    var marker = new BMap.Marker(point);  // 创建标注
    tamMap.addOverlay(marker);               // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    //往地图中添加控件
    tamMap.addControl(new BMap.NavigationControl());    //地图平移缩放控件PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
    tamMap.addControl(new BMap.OverviewMapControl());   //添加缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
    tamMap.addControl(new BMap.ScaleControl());     //比例尺控件，默认位于地图左下方，显示地图的比例关系。
    tamMap.addControl(new BMap.MapTypeControl());   //地图类型控件，默认位于地图右上方。
    tamMap.addControl(new BMap.GeolocationControl());   //定位控件，针对移动端开发，默认位于地图左下方。
    tamMap.addControl(new BMap.CopyrightControl());     //版权控件，默认位于地图左下方。
    tamMap.enableScrollWheelZoom();//允许鼠标滑轮操作  

    tamMap.centerAndZoom(point,currentSize);    //第二个参数越小表示缩小，越大则表示地图放大显示
    //地图放大
    function zoomOut()
    {
        currentSize = currentSize+step > maxSize? currentSize:currentSize+step;
        tamMap.centerAndZoom(point,currentSize);
        // alert(currentSize);
    }
    //地图缩小
    function zoomIn()
    {
        currentSize = currentSize-step < minSize? currentSize:currentSize-step;
        tamMap.centerAndZoom(point,currentSize);
        // alert(currentSize);
    }
    //设置鼠标滑轮滚动事件
    function mScroll()
    {
        if(event.wheelDelta == 120)
        {
            currentSize = currentSize+step > maxSize? currentSize:currentSize+step;
            tamMap.centerAndZoom(point,currentSize);
        }
        else if(event.wheelDelta == -120)
        {
            currentSize = currentSize-step < minSize? currentSize:currentSize-step;
            tamMap.centerAndZoom(point,currentSize);
        }
        // document.getElementById("wheelData").innerHTML = event.wheelDelta;
        // alert("鼠标滑轮滚动.."+event.wheelDelta);
    }
    //坐标转换完之后的回调函数  
    var myDis = new BMapLib.DistanceTool(map);
    map.addEventListener("load",function(){
        myDis.open();  //开启鼠标测距
        //myDis.close();  //关闭鼠标测距
    });
    translateCallback = function(point) {

        var marker = new BMap.Marker(point);

        map.addOverlay(marker);

//根据坐标得到地址描述    
        var myGeo = new BMap.Geocoder();
        myGeo.getLocation(point, function(result) {
            if (result) {
                var label = new BMap.Label(result.address, {
                    offset : new BMap.Size(20, -10)
                });
                marker.setLabel(label);
            }
        });

        // 将标注添加到地图中  
        map.addOverlay(marker);

        o+5//将坐标设置为地图中心位置  
        map.setCenter(point);
    }

    setTimeout(function() {
        BMap.Convertor.translate(new BMap.Point(longitude, latitude), 0,
            translateCallback); //真实经纬度转成百度坐标  
    }, 2000);

</script>
<span id="wheelData"></span>
</body>
</html>

<%--
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3&ak=i3LQs7BoE5cXz7hw7MRdcmqiniUl0n2n"></script>
    <script type="text/javascript" src="baidu/convertor.js"></script>
</head>
<form action="baidu/maps.do" method="post">
    <input type="text" name="city" />
    <input type="submit" value="搜索">
</form>
<body style="width: 100%;height: 100%" background="demo08.jsp">
<div style="width:100%;height:900px;border:0px solid gray"
     id="container"></div>
&lt;%&ndash;<div id="allmap"></div>&ndash;%&gt;
<script type="text/javascript">
    var map = new BMap.Map("container"); // 创建地图实例   
  /*  // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom("北京",12);
    var myDis = new BMapLib.DistanceTool(map);
    map.addEventListener("load",function(){
        myDis.open();  //开启鼠标测距
        //myDis.close();  //关闭鼠标测距
    });*/
    //向地图中添加比例尺控件
    var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
    map.addControl(ctrl_sca);
    var point = new BMap.Point(${lng}, ${lat}); // 创建点坐标  //经度  //纬度
    map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别  
    //往地图中添加控件
    map.addControl(new BMap.NavigationControl());    //地图平移缩放控件PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
    map.addControl(new BMap.OverviewMapControl());   //添加缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
    map.addControl(new BMap.ScaleControl());     //比例尺控件，默认位于地图左下方，显示地图的比例关系。
    map.addControl(new BMap.MapTypeControl());   //地图类型控件，默认位于地图右上方。
    map.addControl(new BMap.GeolocationControl());   //定位控件，针对移动端开发，默认位于地图左下方。
    map.addControl(new BMap.CopyrightControl());     //版权控件，默认位于地图左下方。
    map.enableScrollWheelZoom();//允许鼠标滑轮操作  
    //坐标转换完之后的回调函数  

    translateCallback = function(point) {

        var marker = new BMap.Marker(point);

        map.addOverlay(marker);

      //根据坐标得到地址描述    
        var myGeo = new BMap.Geocoder();
        myGeo.getLocation(point, function(result) {
            if (result) {
                var label = new BMap.Label(result.address, {
                    offset : new BMap.Size(20, -10)
                });
                marker.setLabel(label);
            }
        });

        // 将标注添加到地图中  
        map.addOverlay(marker);

        //将坐标设置为地图中心位置  
        map.setCenter(point);
    }

    setTimeout(function() {
        BMap.Convertor.translate(new BMap.Point(longitude, latitude), 0,
            translateCallback); //真实经纬度转成百度坐标  
    }, 2000);
</script>

&lt;%&ndash;div id="allmap"></div>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom("邯郸",12);
    // map.enableScrollWheelZoom();//允许鼠标滑轮操作  
    var myDis = new BMapLib.DistanceTool(map);
    map.addEventListener("load",function(){
        myDis.open();  //开启鼠标测距
        //myDis.close();  //关闭鼠标测距
    });
</script>&ndash;%&gt;
</body>
</html>
--%>
